<template>
  <div>
    <van-nav-bar
  title="注册"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>
<div class="header-middle">
<img src="@/assets/tubiao.png">
     <br>
     <van-field v-model="account" label="邮箱:" placeholder="请输入邮箱" />
     <van-field v-model="password" type="password" label="密码:"  placeholder="请输入密码"/>
     <van-field v-model="sureword" type="password" label="确认密码:" placeholder="请再次输入密码" />
     <van-field
        v-model="yanzhengma"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
     <template #button>
       <span @click="getCode">{{ second===totalSecond ? '获取验证码':second+'秒后重新发送' }}</span>
     </template>
</van-field>
    </div>
   <div class="bottom">
    <van-button  type="primary" round color="#ff8d1a"  @click="zhuce">注册</van-button>  
    <!-- 注册之后跳转到登陆页面进行登录 -->
  </div>
</div>
</template>

<script>
import { getEmilCode,uploadInformation } from '@/api/shangjia/login';
let Base64 = require('js-base64').Base64; // 引入

export default {
  name:'UserZhuce',
  data() {
  return {
    account:'',//账号
    password:'',//密码
    sureword:"",//确认密码
    yanzhengma:'',//验证码
    totalSecond:60,//总秒数
    second:60,//倒计时的秒数
    timer:null//定时器 id
  }
 },
 methods:{
  // 校验输入框内容
   validFn () {
     if (! /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.account)) {
       this.$toast('请输入正确的邮箱账号')
       return false
     }
     if(this.password!==this.sureword){
      this.$toast('两次输入密码不一致，请重新输入')
      return false
     }
       if(this.account==''||this.password==''){
      this.$toast('输入内容不能为空，请重新输入')
      return false
     }
     return true
   },
   //获取邮箱验证码
  async getCode () {
    if (!this.validFn()) {
        // 如果没通过校验，没必要往下走了
        return
      }
  if (!this.timer && this.second === this.totalSecond) {
    // 开启倒计时
    this.timer = setInterval(() => {
      this.second--
      if (this.second < 1) {
        clearInterval(this.timer)
        this.timer = null
        this.second = this.totalSecond
      }
    }, 1000)
    console.log(this.account);
    //发送验证码接口,把账号反馈到接口
    await getEmilCode(this.account)
    .then((res)=>{
      console.log(res);
    }).catch((err)=>{
      console.log(err);
    })
  }
},
  async zhuce(){
    if (!this.validFn()) {
        // 如果没通过校验，没必要往下走了
        return
      }
  //把用户信息传到数据库内 接口
  let password =  Base64.encode(this.password)  //先进行加密
  await uploadInformation(this.yanzhengma,this.account,password).then((res)=>{
      console.log(res);
      this.$toast('注册成功')
    this.$router.push('/storelogin')
    }).catch((err)=>{
      console.log(err);
    })

},
destroyed () {
  clearInterval(this.timer)
}
 }
}
</script>

<style lang="less">

.header-middle{
 p{
   margin-left: 30px;
   margin-top: 10px;
   font-size: 15px;
   color: #b4aeae;
 }
 img{
   margin-left: 125px;
   margin-top: 50px;
   width: 120px;
   height: 120px;
   border-radius: 50px;
 }
}
.van-cell{
  margin-top: 30px;
}
.van-button--primary {
    margin-left: 140px;
   width: 90px;
   margin-top: 50px;
  }

</style>